<template>
	<view class="tui-addr-box">
		<form :report-submit="true">
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">收货人</view>
					<input v-model="params.realName" placeholder-class="tui-phcolor" class="tui-input" name="name" placeholder="请输入收货人姓名" maxlength="15" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">手机号码</view>
					<input
						v-model="params.mobilePhone"
						placeholder-class="tui-phcolor"
						class="tui-input"
						name="mobile"
						placeholder="请输入收货人手机号码"
						maxlength="11"
						type="text"
					/>
				</view>
			</tui-list-cell>
			<tui-list-cell :arrow="true" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title"><text class="tui-title-city-text">所在城市</text></view>
					<input
						@tap="btnClick"
						placeholder-class="tui-phcolor"
						:value="params.province + params.city + params.district || ''"
						class="tui-input"
						disabled
						placeholder="请选择城市"
						maxlength="50"
						type="text"
					/>
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">详细地址</view>
					<input
						v-model="params.addressDetail"
						placeholder-class="tui-phcolor"
						class="tui-input"
						name="address"
						placeholder="请输入详细的收货地址"
						maxlength="50"
						type="text"
					/>
				</view>
			</tui-list-cell>

			<!-- 默认地址 -->
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-swipe-cell">
					<view>设为默认地址</view>
					<switch @change="handleChange" :checked="params.defaultFlag == 'y'" color="#5677fc" class="tui-switch-small" />
				</view>
			</tui-list-cell>
			<!-- 保存地址 -->
			<view class="tui-addr-save">
				<tui-button @tap="hanldeSumbit" shadow type="primary" height="88rpx">{{ params.id ? '保存' : '添加' }}收货地址</tui-button>
			</view>
			<view class="tui-del" v-if="params.id"><tui-button @tap="handleDelete" shadow type="gray" height="88rpx">删除收货地址</tui-button></view>
		</form>
		<selectAddress ref="selectAddress" @selectAddress="successSelectAddress"></selectAddress>
	</view>
</template>

<script>
import { addressupdate, addrescreate, addressdel } from '@/service/address.js';
import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress.vue';
import form from '@/utils/validation.js';
export default {
	components: {
		selectAddress
	},
	data() {
		return {
			lists: ['公司', '家', '学校', '其他'],
			params: {
				realName: '',
				mobilePhone: '',
				province: '',
				city: '',
				district: '',
				addressDetail: '',
				defaultFlag: 'n'
			}
		};
	},
	onLoad(options) {
		console.log(options);
		if (options.item) {
			this.params = JSON.parse(options.item);
		}
	},
	methods: {
		btnClick() {
			this.$refs.selectAddress.show();
		},
		handleChange({ detail: { value } }) {
			this.params.defaultFlag = value ? 'y' : 'n';
		},
		async handleDelete() {
			uni.showModal({
				title: '提示',
				content: '是否确认删除该地址',
				complete: async ({ confirm }) => {
					if (confirm) {
						try {
							await addressdel({ id: this.params.id }, { loading: true });
							// uni.redirectTo({
							// 	url: '/pages/shop/address/address'
							// });
							uni.navigateBack({});
						} finally {
						}
					}
				}
			});
		},
		successSelectAddress(address) {
			console.log(address);
			if (address && address.length == 2) {
				this.params.province = address[0].replace('市', '');
				this.params.city = address[0] || '';
				this.params.district = address[1] || '';
			} else {
				this.params.province = address[0];
				this.params.city = address[1] || '';
				this.params.district = address[2] || '';
			}
		},
		async hanldeSumbit() {
			let rules = [
				{
					name: 'realName',
					rule: ['required'],
					msg: ['请输入姓名']
				},

				{
					name: 'mobilePhone',
					rule: ['required', 'isMobile'],
					msg: ['请输入手机号码', '请输入正确的手机号码']
				},
				{
					name: 'province',

					msg: ['请选择省']
				},
				{
					name: 'city',
					rule: ['required'],
					msg: ['请选择城市']
				},
				{
					name: 'addressDetail',
					rule: ['required'],
					msg: ['请输入详细地址']
				}
			];
			let checkRes = form.validation(this.params, rules);
			if (!checkRes) {
				try {
					!this.params.id ? await addrescreate(this.params, { loading: true }) : await addressupdate(this.params, { loading: true });
					// uni.redirectTo({
					// 	url: '/pages/shop/address/address'
					// });
					uni.navigateBack({});
				} catch (e) {
					//TODO handle the exception
				}
			}
		}
	}
};
</script>

<style scoped lang="scss">
.tui-addr-box {
	padding: 20rpx 0;
}

.tui-line-cell {
	width: 100%;
	padding: 24rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.tui-title {
	width: 180rpx;
	font-size: 28rpx;
}

.tui-title-city-text {
	width: 180rpx;
	height: 40rpx;
	display: block;
	line-height: 46rpx;
}

.tui-input {
	width: 500rpx;
}

.tui-input-city {
	flex: 1;
	height: 40rpx;
	font-size: 28rpx;
	padding-right: 30rpx;
}

.tui-phcolor {
	color: #ccc;
	font-size: 28rpx;
}
.tui-cell-title {
	font-size: 28rpx;
}
.tui-addr-label {
	margin-left: 70rpx;
}

.tui-label-item {
	width: 76rpx;
	height: 40rpx;
	border: 1rpx solid rgb(136, 136, 136);
	border-radius: 6rpx;
	font-size: 26rpx;
	text-align: center;
	line-height: 40rpx;
	margin-right: 20rpx;
	display: inline-block;
	transform: scale(0.9);
}
.tui-label-active {
	background: $uni-color-primary;
	border-color: $uni-color-primary;
	color: #fff;
}
.tui-swipe-cell {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	padding: 10rpx 24rpx;
	box-sizing: border-box;
	border-radius: 6rpx;
	overflow: hidden;
	font-size: 28rpx;
}

.tui-switch-small {
	transform: scale(0.8);
	transform-origin: 100% center;
}

/* #ifndef H5 */
.tui-switch-small .wx-switch-input {
	margin: 0 !important;
}

/* #endif */

/* #ifdef H5 */
>>> uni-switch .uni-switch-input {
	margin-right: 0 !important;
}

/* #endif */

.tui-addr-save {
	padding: 24rpx;
	margin-top: 100rpx;
}

.tui-del {
	padding: 24rpx;
}
.tui-btn-primary {
	background-color: $primary !important;
}
</style>
